<template>
  <div class="md-example-child md-example-child-date-picker md-example-child-date-picker-0">
    <md-date-picker ref="datePicker"
                    :minDate="minDate"
                    :maxDate="maxDate"
                    :default-date="currentDate"
                    is-view
                    @change="onPickerConfirm"
                    @initialed="onDatePickerInitialed"></md-date-picker>
  </div>
</template>
<script>
import { DatePicker } from 'mand-mobile'
import Vue from 'vue'

Vue.component(DatePicker.name, DatePicker)
export default {
  name: 'picker-demo',
  props: {
    list: {
      default () {
        return []
      },
      type: Array
    },
    defaultValue: {
      default: '',
      type: String
    }
  },
  data () {
    return {
      pickerData: [],
      pickerDefaultIndex: [],
      pickerValue: '',
      minDate: new Date('1940/1/1'),
      maxDate: new Date('2040/1/1'),
      currentDate: new Date()
    }
  },
  mounted () {
    this.setDefaultValue()
  },
  methods: {
    // 设置默认的数据
    setDefaultValue () {
      if (this.defaultValue) {
        this.currentDate = new Date(this.defaultValue)
      }
    },
    // 初始化数据，返回去
    onDatePickerInitialed () {
      this.submitFatherInfo()
    },
    // 公共方法，停住滑动后告诉父类当前的选中值
    submitFatherInfo () {
      // 获取组件
      let picker = this.$refs.datePicker
      // 通知父类
      this.$emit('pickerPause', picker.getFormatDate('yyyy/MM/dd'))
    },
    // 获取 值，停止滑动后出发的事件
    onPickerConfirm (columnIndex, itemIndex, value) {
      if (value) {
        this.submitFatherInfo()
      }
    },
    getColumnValue (picker, index) {
      const value = this.$refs.picker.getColumnValue(index)
      delete value.children
    }
  }
}
</script>
